<template>
  <div style="width:100%;height:100%;background:none">
    <div class="title">出勤统计</div>
    <div style="width:100%;margin:0 auto;height:80%">
      <a-carousel autoplay style="height:100%">
        <div>
          <div class="roundDiv flexCenter2">
            <div>
              <div class="numDiv">{{this.todayAttendance}}</div>
              <div class="wordDiv">今日出勤</div>
            </div>
          </div>
        </div>
        <div style="width:100%;height:100%">
          <ul>
            <li
              v-for="(item, index) in List"
              :key="index"
              class="flexStart"
              style="align-items:center"
            >
              <div
                style="width:5.3rem;border-radius:5.3rem;height:5.3rem;margin-right:2rem;margin-left:1rem;overflow:hidden"
              >
                <img :src="item.faceUrl" alt width="100%" height="100%" />
              </div>
              <div style="width:calc(100% - 7.3rem)">
                <div style="color:#fff;margin-bottom:1.5rem;font-size:1.2rem" class="flexStart">
                  <span style="font-size:1.2rem">{{item.fullName}}</span>
                  <span
                    style="font-size:1.2rem;margin-right:1rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">（{{item.postName}}）</span>
                  <span
                    style="font-size:1.2rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width:30%"
                  >{{item.teamName}}</span>
                </div>
                <div class="flexStart">
                  <span style="margin-right:2.4rem">{{item.tenderCode}}</span>
                  <span>{{item.recordDate}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </a-carousel>
    </div>
  </div>
</template>

<script>
import { getAttendanceNews } from '@/api/dataCenterHome'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      List: [],
      todayAttendance: 0,
      attentanceTimer: null
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    // 监听实时刷新数据
    todayAttendanceData() {
      return this.$store.state.dataCenterHome.homePageLabourVO.todayAttendance
    }
  },
  watch: {
    todayAttendanceData: {
      handler(val) {
        // console.log(val);

        this.todayAttendance = val
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.getAttendance()
    this.attentanceTimer = setInterval(() => {
      this.getAttendance()
    }, 300000)
  },
  beforeDestroy() {
    clearInterval(this.attentanceTimer)
  },
  methods: {
    //获取考勤动态数据
    getAttendance() {
      getAttendanceNews({ projectId: this.userInfo.projectId }).then((res) => {
        let resData = res.data.data
        this.List = resData
      })
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 3%;
}
.roundDiv {
  width: 16rem;
  height: 16rem;
  /* border: 0.4rem solid #0082c4; */
  background: url('../../../../../assets/img/attenDance.png');
  background-size: 100%;
  border-radius: 16rem;
  margin: 0 auto;
}
.numDiv,
.wordDiv {
  width: 16rem;
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
  color: #ff9393;
}

.wordDiv {
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
}
::v-deep .ant-carousel .slick-slider {
  height: 100%;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  width: 100%;
  padding-bottom: 2rem;
  /* background: #364d79; */
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

ul {
  height: 17.2rem;
  overflow-y: auto;
}
ul::-webkit-scrollbar {
  display: none;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  cursor: pointer;
  height: 7rem;
  margin-bottom: 1.6rem;
  padding: 0.3rem;
  background: rgba(92, 255, 255, 0.2);
  color: #5cffff;
  border-radius: 1rem;
}
li:hover {
  color: #fff;
  border: 0.1rem solid #5cffff;
  transition: 0.5s all;
}
span {
  margin-right: 1rem;
}
</style>